<template>
  <div>
    <div style="display: flex">
      <div style="width: 49%;padding-right:20px;border-right: 1px solid #000000">
        <div style="margin-bottom: 20px;font-size: 16px;font-weight: 800">基本信息</div>
        <el-form ref="detailsleftform" :model="detailsleftform" label-width="120px">
          <div style="display: flex">
            <div style="width: 50%">
              <el-form-item label="柜组ID：">
                <el-input v-model="detailsleftform.id" disabled clearable placeholder="" autocomplete="off"/>
              </el-form-item>
              <el-form-item label="4G模块：">
                <div style="display: flex">
                  <el-input v-model="detailsleftform.pcb_detail.lot_model_sn" disabled clearable placeholder=""
                            autocomplete="off"/>
                </div>
              </el-form-item>
              <el-form-item label="SIM卡：">
                <div style="display: flex">
                  <el-input v-model="detailsleftform.iccid" disabled clearable placeholder=""
                            autocomplete="off"/>
                </div>
              </el-form-item>
              <el-form-item label="安卓板：">
                <div style="display: flex">
                  <el-input v-model="detailsleftform.pcb_detail.android_cpu_no" placeholder=""
                            disabled clearable autocomplete="off"/>
                </div>
              </el-form-item>
            </div>
            <div style="width: 50%">
              <el-form-item label="质保开始时间：">
                <el-date-picker v-model="detailsleftform.assurance_sdt" type="date" format="yyyy-MM-dd" disabled
                                value-format="yyyy-MM-dd" style="width: 100%;" placeholder="">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="售后电话：">
                <el-input v-model="detailsleftform.service_tel" disabled clearable placeholder="" autocomplete="off"/>
              </el-form-item>
              <el-form-item label="质保名称：">
                <el-select v-model="detailsleftform.qa_service_id" disabled clearable placeholder="">
                  <el-option v-for="item in qa_names" :label="item.qa_name" :value="item.qa_service_id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="质保时长：">
                <el-input v-model="detailsleftform.qa_duration" disabled clearable placeholder="" autocomplete="off"/>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="固件号：">
            <el-input v-model="detailsleftform.pcb_detail.android_firmware_version" placeholder=""
                      disabled clearable autocomplete="off"/>
          </el-form-item>
          <el-form-item label="质保细则：">
            <el-input disabled v-model="detailsleftform.qa_content" type="textarea" placeholder=""
                      :autosize="{ minRows: 5, maxRows: 5}" autocomplete="off"/>
          </el-form-item>
          <el-table header-cell-class-name="tableheader" :data="detailsleftform.pcb_detail.box_infos">
            <el-table-column align="center" label="柜体">
              <template slot-scope="scope">
                <div v-if="scope.row.box_no===0">主柜</div>
                <div v-else>{{ scope.row.box_no }}副</div>
                <el-select clearable disabled v-model="scope.row.box_type" placeholder="">
                  <el-option v-for="item in getkids" :label="item.value" :value="item.id"></el-option>
                </el-select>
                <div>{{ scope.row.box_code }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="物料名称">
              <template slot-scope="scope">
                <div style="height: 40px;line-height:40px;margin-bottom: 16px">驱动板</div>
                <div style="height: 40px;line-height:40px;margin-bottom: 16px">温控板</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="SN">
              <template slot-scope="scope">
                <el-input v-model="scope.row.pcb_driver.cpu_no" disabled clearable autocomplete="off"/>
                <div style="height: 16px;font-size: 12px;color: #E60012">
                  <span v-show="scope.row.pcb_driver.is_alert">{{ scope.row.pcb_driver.alert_type_str }}</span>
                </div>
                <el-input v-model="scope.row.pcb_temp.cpu_no" disabled clearable autocomplete="off"/>
                <div style="height: 16px;font-size: 12px;color: #E60012">
                  <span v-show="scope.row.pcb_temp.is_alert">{{ scope.row.pcb_temp.alert_type_str }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="程序版本">
              <template slot-scope="scope">
                <el-input style="margin-bottom: 16px;" v-model="scope.row.pcb_driver.program_version" disabled clearable
                          autocomplete="off"/>
                <el-input style="margin-bottom: 16px;" v-model="scope.row.pcb_temp.program_version" disabled clearable
                          autocomplete="off"/>
              </template>
            </el-table-column>
            <el-table-column align="center" label="生产日期">
              <template slot-scope="scope">
                <el-input style="margin-bottom: 16px;" v-model="scope.row.pcb_driver.first_receive_time" disabled
                          clearable autocomplete="off"/>
                <el-input style="margin-bottom: 16px;" v-model="scope.row.pcb_temp.first_receive_time" disabled
                          clearable autocomplete="off"/>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <div style="float: right;margin-top: 15px">
          <el-button type="primary" @click="lookhisimg">更新记录</el-button>
        </div>
      </div>
      <div style="width: 49%;margin-left: 10px">
        <el-form ref="detailsdialogform" :model="detailsdialogform" label-width="100px">
          <el-form-item label="报修日期：">
            <el-date-picker
              disabled
              style="width: 100%"
              v-model="detailsdialogform.addtime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="请选择报修日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="客户姓名：">
            <el-input
              disabled
              style="width: 100%"
              v-model="detailsdialogform.user_name"
              clearable
              autocomplete="off"/>
          </el-form-item>
          <el-form-item label="客户账号：">
            <el-input
              disabled
              style="width: 100%"
              v-model="detailsdialogform.user_loginname"
              clearable
              autocomplete="off"/>
          </el-form-item>
          <el-form-item label="报修类型：">
            <el-cascader
              :disabled="repairtypedisabled"
              placeholder="请选择报修类型"
              style="width: 100%"
              v-model="detailsdialogform.repairtype"
              :options="typedata"
              :props="props"></el-cascader>
          </el-form-item>
          <el-form-item label="当前状态：">
            <el-input
              style="width: 100%"
              v-model="detailsdialogform.repair_handle_state_str"
              disabled
              clearable
              autocomplete="off"/>
          </el-form-item>
          <el-form-item label="变更状态：">
            <el-select clearable v-model="detailsdialogform.now_state"
                       style="width: 100%"
                       :disabled="now_statedisabled"
                       @change="emitform"
                       placeholder="请选择变更状态">
              <el-option label="已完成" :value="6"></el-option>
              <el-option label="已关闭" :value="10"></el-option>
              <el-option label="不做变更 " :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="问题描述：">
            <el-input
              style="width: 100%"
              v-model="detailsdialogform.repair_des"
              :disabled="repair_desdisabled"
              @change="emitform"
              clearable
              type="textarea"
              :maxlength="200"
              autocomplete="off"/>
          </el-form-item>
          <el-form-item label="问题图片：" prop="repair_des_pic">
            <div class="clearfix">
              <div v-for="(item,key) in detailsdialogform.repair_des_pic"
                   style="width:200px;height:230px;float: left;margin-left: 5px;text-align: center">
                <div style="width: 175px;height: 175px;position: relative">
                  <img
                    style="cursor:pointer;max-width: 150px;max-height: 150px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto"
                    :src="item" @click="opendialogurl(item)">
                </div>
                <div class="del" v-if="!repair_desdisabled">
                  <el-button style="margin:0 auto;" type="danger" @click="repairdespicRemove(item,key)">删除
                  </el-button>
                </div>
              </div>
            </div>
            <div v-if="detailsdialogform.repair_des_pic.length<5&&!repair_desdisabled" class="video-content"
                 style="text-align: center">
              <el-upload class="uploader" ref="upload" accept=".jpg,.png,.bmp,.gif" :show-file-list="false"
                         :action="action"
                         :before-upload="beforeAvatarUpload" :on-success="repairdespicOnSuccess">
                <el-button type="primary">点击上传图片</el-button>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="售后专员：">
            <el-input
              v-model="detailsdialogform.customer_repair_handle_result"
              :disabled="customerdisabled"
              clearable
              @change="emitform"
              type="textarea"
              :maxlength="200"
              autocomplete="off"/>
          </el-form-item>
          <el-form-item label="技术售后：">
            <el-input
              v-model="detailsdialogform.technology_repair_handle_result"
              :disabled="technologydisabled"
              clearable
              @change="emitform"
              type="textarea"
              :maxlength="200"
              autocomplete="off"/>
          </el-form-item>
          <el-button style="float: right;margin: 0 0 5px 0" :disabled="Approvaldisabled" type="primary"
                     @click="Mailapproval">
            寄件审批
          </el-button>
          <div>
            <el-switch style="float: right;margin: 15px 10px 0 0"
                       v-model="detailsdialogform.iswork"
                       :active-value="1"
                       :inactive-value="0"
                       active-text="生产原因"
                       inactive-text="非生产">
            </el-switch>
          </div>
        </el-form>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" class="approvalpic" :append-to-body="true" title="寄件审批"
               :visible.sync="Mailapprovaldialog" width="70%">
      <el-form ref="Mailapprovaldialogform" :model="Mailapprovaldialogform" :rules="Mailapprovaldialogrule"
               label-width="120px">
        <div style="display: flex">
          <div style="width: 50%">
            <el-form-item label="柜组ID：">
              <el-input style="width: 100%;" disabled v-model="detailsdialogform.mch_id" clearable autocomplete="off"/>
            </el-form-item>
            <el-form-item label="客户账号：">
              <el-input style="width: 100%;" disabled v-model="detailsdialogform.user_loginname" clearable
                        autocomplete="off"/>
            </el-form-item>
            <el-form-item label="审批模式：" prop="approval_model">
              <el-select style="width: 100%;" v-model="Mailapprovaldialogform.approval_model"
                         placeholder="请选择审批模式" @change="getapproval">
                <el-option label="在保审批" :value="0"></el-option>
                <el-option label="超保审批" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div style="width: 50%">
            <el-form-item label="发件地：" prop="express_source">
              <el-select style="width: 100%;" clearable v-model="Mailapprovaldialogform.express_source"
                         placeholder="请选择发件地">
                <el-option label="工厂" :value="1"></el-option>
                <el-option label="公司" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户姓名：">
              <el-input style="width: 100%;" disabled v-model="detailsdialogform.user_name" clearable
                        autocomplete="off"/>
            </el-form-item>
            <el-form-item label="审批人：" prop="approval_uid">
              <el-select style="width: 100%;" clearable v-model="Mailapprovaldialogform.approval_uid"
                         placeholder="请选择审批人">
                <el-option v-for="item in approvals" :label="item.u_name" :value="item.uid"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <!--在保-->
        <div v-if="Mailapprovaldialogform.approval_model===0">
          <div style="display: flex">
            <el-form-item label="收件人：" prop="express_recipient" style="width: 50%">
              <el-input v-model="Mailapprovaldialogform.express_recipient" placeholder="请输入收件人" clearable
                        autocomplete="off"/>
            </el-form-item>
            <el-form-item label="发货快递：" prop="express_service_provider" style="width: 25%;">
              <el-select style="width: 100%;" clearable v-model="Mailapprovaldialogform.express_service_provider"
                         placeholder="请选择">
                <el-option label="不指定" :value="1"></el-option>
                <el-option label="顺丰" :value="2"></el-option>
                <el-option label="京东" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="快递模式：" prop="express_model" style="width: 25%;">
              <el-select style="width: 100%;" clearable v-model="Mailapprovaldialogform.express_model"
                         placeholder="请选择">
                <el-option label="寄付" value="寄付"></el-option>
                <el-option label="到付" value="到付"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="收件地址：" prop="express_address">
            <el-input v-model="Mailapprovaldialogform.express_address" type="textarea"
                      :autosize="{ minRows: 5, maxRows: 5}" autocomplete="off"/>
          </el-form-item>
          <el-form-item>
            <div slot="label">
              <div>发货内容：</div>
              <div style="font-size: 12px;text-align: center;line-height: 12px">(普通类)</div>
            </div>
            <table>
              <tr>
                <td style="width: 20%;text-align: center">物料编号</td>
                <td style="width: 25%;text-align: center">名称</td>
                <td style="width: 25%;text-align: center">规格型号</td>
                <td style="width: 15%;text-align: center">数量</td>
                <td style="width: 15%;text-align: center">操作</td>
              </tr>
              <tr v-for="(item,index) in Mailapprovaldialogform.repair_parts_normal">
                <td style="width: 20%">
                  <el-autocomplete style="width: 100%;" v-model="item.materiel_total_show_no"
                                   :fetch-suggestions="querymateriel_total_show_no"
                                   @select="selectautocomplete($event,item)"
                                   clearable placeholder="请输入物料编号"></el-autocomplete>
                </td>
                <td style="width: 25%">
                  <el-autocomplete style="width: 100%;" v-model="item.materiel_name"
                                   :fetch-suggestions="querymateriel_name"
                                   @select="selectautocomplete($event,item)"
                                   clearable placeholder="请输入名称"></el-autocomplete>
                </td>
                <td style="width: 25%">
                  <el-input v-model="item.materiel_specifications" placeholder="请输入规格型号" clearable/>
                </td>
                <td style="width: 15%">
                  <el-input v-model="item.count" placeholder="请输入数量" clearable/>
                </td>
                <td style="width: 15%;text-align: center">
                  <el-button type="danger" size="mini" plain @click="del(index,item,'repair_parts_normal')">删除
                  </el-button>
                  <el-button v-if="index===Mailapprovaldialogform.repair_parts_normal.length-1" type="primary"
                             size="mini" plain @click="add(index,item,'repair_parts_normal')">添加
                  </el-button>
                </td>
              </tr>
            </table>
          </el-form-item>
          <el-form-item prop="repair_parts_return">
            <div slot="label">
              <div>发货内容：</div>
              <div style="font-size: 12px;text-align: center;line-height: 12px">(返件检测类)</div>
            </div>
            <table>
              <tr v-for="(item,index) in Mailapprovaldialogform.repair_parts_return">
                <td style="width: 15%">
                  <el-select style="width: 100%;" clearable v-model="item.box_no"
                             placeholder="请选择" @change="item.materiel_total_show_no=''">
                    <el-option label="主柜" :value="0"></el-option>
                    <el-option label="一副" :value="1"></el-option>
                    <el-option label="二副" :value="2"></el-option>
                    <el-option label="三副" :value="3"></el-option>
                    <el-option label="四副" :value="4"></el-option>
                  </el-select>
                </td>
                <td style="width: 25%">
                  <el-select style="width: 100%;" clearable v-model="item.materiel_total_show_no"
                             placeholder="请选择">
                    <el-option v-for="selectitem in return_showdatas['box_no_'+item.box_no]"
                               :label="selectitem.materiel_name"
                               :value="selectitem.materiel_total_show_no"></el-option>
                  </el-select>
                </td>
                <td style="width:45%">
                  <el-input v-model="item.remark" placeholder="请输入备注" clearable/>
                </td>
                <td style="width: 15%;text-align: center">
                  <el-button type="danger" size="mini" plain @click="del(index,item,'repair_parts_return')">删除
                  </el-button>
                  <el-button v-if="index===Mailapprovaldialogform.repair_parts_return.length-1" type="primary"
                             size="mini" plain @click="add(index,item,'repair_parts_return')">添加
                  </el-button>
                </td>
              </tr>
            </table>
          </el-form-item>
        </div>
        <!--超保-->
        <div v-if="Mailapprovaldialogform.approval_model===1">
          <div style="display: flex">
            <el-form-item label="收件人：" prop="express_recipient" style="width: 20%">
              <el-input v-model="Mailapprovaldialogform.express_recipient" placeholder="请输入收件人" clearable
                        autocomplete="off"/>
            </el-form-item>
            <el-form-item label="配件金额：" prop="approval_price" style="width: 20%">
              <el-input v-model="Mailapprovaldialogform.approval_price" placeholder="请输入审批金额" clearable
                        autocomplete="off"/>
            </el-form-item>
            <el-form-item label="发货快递：" prop="express_service_provider" style="width: 20%;">
              <el-select style="width: 100%;" clearable v-model="Mailapprovaldialogform.express_service_provider"
                         placeholder="请选择">
                <el-option label="不指定" :value="1"></el-option>
                <el-option label="顺丰" :value="2"></el-option>
                <el-option label="京东" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="快递模式：" prop="express_model" style="width: 20%;">
              <el-select style="width: 100%;" clearable v-model="Mailapprovaldialogform.express_model"
                         placeholder="请选择">
                <el-option label="寄付" value="寄付"></el-option>
                <el-option label="到付" value="到付"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运费：" prop="freight" style="width: 20%">
              <el-input v-model="Mailapprovaldialogform.freight" placeholder="请输入运费" clearable
                        autocomplete="off"/>
            </el-form-item>
          </div>
          <el-form-item label="收件地址：" prop="express_address">
            <el-input v-model="Mailapprovaldialogform.express_address" type="textarea"
                      :autosize="{ minRows: 5, maxRows: 5}" autocomplete="off"/>
          </el-form-item>
          <el-form-item>
            <div slot="label">
              <div>发货内容：</div>
              <div style="font-size: 12px;text-align: center;line-height: 12px">(普通类)</div>
            </div>
            <table>
              <tr>
                <td style="width: 20%;text-align: center">物料编号</td>
                <td style="width: 25%;text-align: center">名称</td>
                <td style="width: 25%;text-align: center">规格型号</td>
                <td style="width: 15%;text-align: center">数量</td>
                <td style="width: 15%;text-align: center">操作</td>
              </tr>
              <tr v-for="(item,index) in Mailapprovaldialogform.repair_parts_normal">
                <td style="width: 20%">
                  <el-autocomplete style="width: 100%;" v-model="item.materiel_total_show_no"
                                   :fetch-suggestions="querymateriel_total_show_no"
                                   @select="selectautocomplete($event,item)"
                                   clearable placeholder="请输入物料编号"></el-autocomplete>
                </td>
                <td style="width: 25%">
                  <el-autocomplete style="width: 100%;" v-model="item.materiel_name"
                                   :fetch-suggestions="querymateriel_name"
                                   @select="selectautocomplete($event,item)"
                                   clearable placeholder="请输入名称"></el-autocomplete>
                </td>
                <td style="width: 25%">
                  <el-input v-model="item.materiel_specifications" placeholder="请输入规格型号" clearable/>
                </td>
                <td style="width: 15%">
                  <el-input v-model="item.count" placeholder="请输入数量" clearable/>
                </td>
                <td style="width: 15%;text-align: center">
                  <el-button type="danger" size="mini" plain @click="del(index,item,'repair_parts_normal')">删除
                  </el-button>
                  <el-button v-if="index===Mailapprovaldialogform.repair_parts_normal.length-1" type="primary"
                             size="mini" plain @click="add(index,item,'repair_parts_normal')">添加
                  </el-button>
                </td>
              </tr>
            </table>
          </el-form-item>
          <el-form-item prop="repair_parts_return">
            <div slot="label">
              <div>发货内容：</div>
              <div style="font-size: 12px;text-align: center;line-height: 12px">(返件检测类)</div>
            </div>
            <table>
              <tr v-for="(item,index) in Mailapprovaldialogform.repair_parts_return">
                <td style="width: 15%">
                  <el-select style="width: 100%;" clearable v-model="item.box_no"
                             placeholder="请选择" @change="item.materiel_total_show_no=''">
                    <el-option label="主柜" :value="0"></el-option>
                    <el-option label="一副" :value="1"></el-option>
                    <el-option label="二副" :value="2"></el-option>
                    <el-option label="三副" :value="3"></el-option>
                    <el-option label="四副" :value="4"></el-option>
                  </el-select>
                </td>
                <td style="width: 25%">
                  <el-select style="width: 100%;" clearable v-model="item.materiel_total_show_no"
                             placeholder="请选择">
                    <el-option v-for="selectitem in return_showdatas['box_no_'+item.box_no]"
                               :label="selectitem.materiel_name"
                               :value="selectitem.materiel_total_show_no"></el-option>
                  </el-select>
                </td>
                <td style="width:45%">
                  <el-input v-model="item.remark" placeholder="请输入备注" clearable/>
                </td>
                <td style="width: 15%;text-align: center">
                  <el-button type="danger" size="mini" plain @click="del(index,item,'repair_parts_return')">删除
                  </el-button>
                  <el-button v-if="index===Mailapprovaldialogform.repair_parts_return.length-1" type="primary"
                             size="mini" plain @click="add(index,item,'repair_parts_return')">添加
                  </el-button>
                </td>
              </tr>
            </table>
          </el-form-item>
          <el-form-item label="审批图片：" prop="transfer_screenshot">
            <div class="clearfix">
              <div v-for="(item,key) in Mailapprovaldialogform.transfer_screenshot"
                   style="float: left;margin-left: 5px;text-align: center">
                <div style="width: 150px;height: 150px;position: relative">
                  <img
                    style="cursor:pointer;max-width: 135px;max-height: 135px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto"
                    :src="item" @click="opendialogurl(item)">
                </div>
                <div class="del" v-if="!repair_desdisabled">
                  <el-button style="margin:0 auto;" type="danger" @click="transferscreenshotRemove(item,key)">删除
                  </el-button>
                </div>
              </div>
            </div>
            <div v-if="Mailapprovaldialogform.transfer_screenshot.length<6" class="video-content"
                 style="text-align: center">
              <el-upload class="uploader" ref="upload" accept=".jpg,.png,.bmp,.gif" :show-file-list="false"
                         :action="action"
                         :before-upload="beforeAvatarUpload" :on-success="transferscreenshotOnSuccess">
                <el-button type="primary">点击上传图片</el-button>
              </el-upload>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Mailapprovaldialogbtn">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="更新记录" :append-to-body="true" :visible.sync="historydialog"
               width="60%"
               :close-on-press-escape="false">
      <el-table header-cell-class-name="tableheader" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)" :data="historylist"
                highlight-current-row border fit element-loading-text="加载中···">
        <el-table-column align="center" label="更新时间">
          <template slot-scope="scope">
            {{ scope.row.addtime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作人">
          <template slot-scope="scope">
            {{ scope.row.customer_uname }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物料名称">
          <template slot-scope="scope">
            {{ scope.row.materiel_name }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="新sn">
          <template slot-scope="scope">
            {{ scope.row.cpu_no_new }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="旧sn">
          <template slot-scope="scope">
            {{ scope.row.cpu_no }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="柜体">
          <template slot-scope="scope">
            {{ scope.row.box_no }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="机器sn">
          <template slot-scope="scope">
            {{ scope.row.mch_sn }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog :append-to-body="true" :visible.sync="dialogurl">
      <div style="text-align: center">
        <img style="max-width: 500px;max-height: 500px" :src="dialogImageUrl" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import imageConversion from 'image-conversion';

export default {
  name: "detailsdialog",
  props: ['repair_id', 'mch_id', 'isreadonly'],
  data() {
    return {
      action: this.$master + '/tools/UploadRK?type=customer',
      repairpage: '',
      mchidpage: '',
      typedata: [],
      approvals: [],
      detailsdialogform: {
        addtime: '',
        mch_assurance_sdt: '',
        user_name: '',
        user_wx_name: '',
        mch_sn: '',
        repair_type: '',
        repair_kid_type: '',
        repair_des_pic: [],
        repair_des: '',
        repair_handle_state_str: '',
        now_state: '',
        iswork: 0,
        customer_repair_handle_result: '',
        technology_repair_handle_result: '',
        approval_repair_handle_result: '',
        can_approval: false,
        can_customer: false,
        repairtype: [],
      },
      detailsleftform: {
        pcb_detail: {},
      },
      Returndatadialogform: {
        sn: '',
        no_can_update_return_list: [],
        can_update_return_list: {},
        repair_des: '',
        express_no: '',
      },
      Mailapprovaldialogform: {},
      Mailapprovaldialogrule: {
        approval_uid: [
          {required: true, message: '此项为必填项'}
        ],
        approval_model: [
          {required: true, message: '此项为必填项'}
        ],
        express_model: [
          {required: true, message: '此项为必填项'}
        ],
        freight: [
          {required: true, message: '此项为必填项'}
        ],
        approval_price: [
          {required: true, message: '此项为必填项'}
        ],
        express_no: [
          {required: true, message: '此项为必填项'}
        ],
        transfer_screenshot: [
          {required: true, message: '此项为必填项'}
        ],
        express_recipient: [
          {required: true, message: '此项为必填项'}
        ],
        express_service_provider: [
          {required: true, message: '此项为必填项'}
        ],
        express_address: [
          {required: true, message: '此项为必填项'}
        ],
        express_source: [
          {required: true, message: '此项为必填项'}
        ],
      },
      props: {
        value: "label",
        label: "label",
        children: "children"
      },
      Mailapprovaldialog: false,
      dialogurl: false,
      dialogImageUrl: '',
      repair_express_no: '',
      repair_content_pic: '',
      repairtypedisabled: true,
      repair_desdisabled: true,
      now_statedisabled: true,
      customerdisabled: true,
      ReturnApprovaldisabled: true,
      Approvaldisabled: true,
      technologydisabled: true,
      contentReturnApprovaldisabled: true,
      expressnodisabled: true,
      historydialog: false,
      historylist: [],
      getkids: [],
      qa_names: [],
      return_showdatas: {},
    }
  },
  watch: {
    repair_id: function (newVal, oldVal) {
      this.repairpage = newVal;
      this.getdetailsdialogform();
    },
    mch_id: function (newVal, oldVal) {
      this.mchidpage = newVal;
      this.getdetailsdialogform();
    },
  },
  created() {
    this.getrepair_id();
    this.getmch_id();
    this.gettype();
    this.judge();
    this.getkid();
    this.get_mch();
    this.get_repair_parts_materiel()
  },
  methods: {
    get_repair_parts_materiel() {
      this.$post(this.$api + '/repair/get_repair_parts_materiel')
        .then((res) => {
          if (res.code === 0) {
            this.return_showdatas = res.data.return_show
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error',
            })
          }
        })
    },
    get_mch() {
      this.$get(this.$api + '/RK/get_mch', {mch_id: this.mchidpage})
        .then((res) => {
          if (res.code === 0) {
            this.detailsleftform = res.data
            this.chamchtype()
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error',
            })
          }
        })
    },
    chamchtype() {
      this.$get(this.$api + '/mch_qa/get_list_by_mchtype', {
        mch_kid_type_id: this.detailsleftform.mch_kid_type_id,
      }).then((res) => {
        if (res.code === 0) {
          this.qa_names = res.data
          if (this.detailsleftform.qa_service_id) {
            const ishas_qaservice = this.qa_names.find((item) => {
              return (
                item.qa_service_id === this.detailsleftform.qa_service_id
              )
            })
            if (ishas_qaservice === undefined) {
              this.qa_names.push({
                qa_content: this.detailsleftform.qa_content,
                qa_duration: this.detailsleftform.qa_duration,
                qa_name: '已禁用',
                qa_service_id: this.detailsleftform.qa_service_id,
              })
            }
          }
        }
      })
    },
    getkid() {
      this.$get(this.$api + '/mch_type/get_kid').then((res) => {
        if (res.code === 0) {
          this.getkids = res.data
        } else {
          this.$notify({
            title: '失败',
            message: res.msg,
            type: 'error',
          })
        }
      })
    },
    judge() {
      console.log(this.isreadonly);
      if (this.isreadonly === true) {
        this.repairtypedisabled = true;
        this.repair_desdisabled = true;
        this.now_statedisabled = true;
        this.customerdisabled = true;
        this.ReturnApprovaldisabled = true;
        this.Approvaldisabled = true;
        this.technologydisabled = true;
        this.contentReturnApprovaldisabled = true;
        this.expressnodisabled = true;
      } else {
        this.repairtypedisabled = false;
        this.repair_desdisabled = false;
        this.now_statedisabled = false;
        this.customerdisabled = false;
        this.ReturnApprovaldisabled = false;
        this.Approvaldisabled = false;
        this.technologydisabled = false;
        this.contentReturnApprovaldisabled = false;
        this.expressnodisabled = false;
        if (this.detailsdialogform.can_approval === true) {
          this.ReturnApprovaldisabled = false;
          this.Approvaldisabled = false;
          this.technologydisabled = false;
          this.contentReturnApprovaldisabled = false;
          this.expressnodisabled = false;
        } else {
          this.ReturnApprovaldisabled = true;
          this.Approvaldisabled = true;
          this.technologydisabled = true;
          this.contentReturnApprovaldisabled = true;
          this.expressnodisabled = true;
        }
        if (this.detailsdialogform.can_customer === true) {
          this.repairtypedisabled = false;
          this.repair_desdisabled = false;
          this.now_statedisabled = false;
          this.customerdisabled = false;
        } else {
          this.repairtypedisabled = true;
          this.repair_desdisabled = true;
          this.now_statedisabled = true;
          this.customerdisabled = true;
        }
      }
    },
    getrepair_id() {
      this.repairpage = this.repair_id;
      this.getdetailsdialogform()
    },
    getmch_id() {
      this.mchidpage = this.mch_id;
      this.getdetailsdialogform()
    },
    getdetailsdialogform() {
      this.$get(this.$api + '/repair/repair_model', {
        'repair_id': this.repair_id
      })
        .then((res) => {
          if (res.code === 0) {
            this.detailsdialogform = res.data;
            this.detailsdialogform.repairtype = [res.data.repair_type, res.data.repair_kid_type];
            if (res.data.repair_des_pic !== null) {
              this.detailsdialogform.repair_des_pic = JSON.parse(res.data.repair_des_pic)
            } else {
              this.detailsdialogform.repair_des_pic = []
            }
            if (res.data.transfer_screenshot !== null) {
              this.detailsdialogform.transfer_screenshot = res.data.transfer_screenshot
            } else {
              this.detailsdialogform.transfer_screenshot = []
            }
            this.judge();
            this.emitform()
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            })
          }
        })
    },
    gettype() {
      this.$get(this.$api + '/repair/get_type')
        .then((res) => {
          if (res.code === 0) {
            this.typedata = res.data;
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            })
          }
        })
    },
    getapproval() {
      this.$get(this.$api + '/repair/get_customer_userlist', {
        'lv': 'approval',
        //'approval_model': this.Mailapprovaldialogform.approval_model
        'approval_model':0
      })
        .then((res) => {
          if (res.code === 0) {
            this.approvals = res.data;
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    Mailapproval() {
      this.Mailapprovaldialogform = {
        repair_id: this.repair_id,
        approval_uid: this.detailsdialogform.approval_uid,
        approval_model: this.detailsdialogform.approval_model,
        express_model: this.detailsdialogform.express_model,
        approval_price: this.detailsdialogform.approval_price,
        freight: this.detailsdialogform.freight,
        express_no: this.detailsdialogform.express_no,
        transfer_screenshot: this.detailsdialogform.transfer_screenshot,
        express_recipient: this.detailsdialogform.express_recipient,
        express_service_provider: this.detailsdialogform.express_service_provider,
        express_address: this.detailsdialogform.express_address,
        express_source: this.detailsdialogform.express_source,
        repair_parts_normal: [],
        repair_parts_return: [],
      }
      if (this.detailsdialogform.repair_parts_normal.length === 0) {
        this.Mailapprovaldialogform.repair_parts_normal = [{
          materiel_name: "",
          materiel_total_show_no: "",
          materiel_specifications: "",
          count: "",
        }]
      } else {
        for (var i in this.detailsdialogform.repair_parts_normal) {
          this.Mailapprovaldialogform.repair_parts_normal.push({
            materiel_name: this.detailsdialogform.repair_parts_normal[i].materiel_name,
            materiel_total_show_no: this.detailsdialogform.repair_parts_normal[i].materiel_total_show_no,
            materiel_specifications: this.detailsdialogform.repair_parts_normal[i].materiel_specifications,
            count: this.detailsdialogform.repair_parts_normal[i].count,
          })
        }
      }
      if (this.detailsdialogform.repair_parts_return.length === 0) {
        this.Mailapprovaldialogform.repair_parts_return = [{
          materiel_total_show_no: "",
          box_no: "",
          remark: ""
        }]
      } else {
        for (var j in this.detailsdialogform.repair_parts_return) {
          console.log(this.detailsdialogform.repair_parts_return[j]);
          this.Mailapprovaldialogform.repair_parts_return.push({
            materiel_total_show_no: this.detailsdialogform.repair_parts_return[j].materiel_total_show_no,
            box_no: this.detailsdialogform.repair_parts_return[j].box_no,
            remark: this.detailsdialogform.repair_parts_return[j].remark,
          })
        }
      }
      this.getapproval()
      this.Mailapprovaldialog = true;
    },
    Mailapprovaldialogbtn() {
      this.$refs['Mailapprovaldialogform'].validate((valid) => {
        if (valid) {
          this.$post(this.$api + '/repair/post_application_approval', this.Mailapprovaldialogform)
            .then((res) => {
              if (res.code === 0) {
                this.$notify({
                  title: '成功',
                  message: res.msg,
                  type: 'success'
                });
                this.Mailapprovaldialog = false;
                this.getdetailsdialogform()
              } else {
                this.$notify({
                  title: '失败',
                  message: res.msg,
                  type: 'error'
                });
              }
            });
        }
      })
    },
    emitform() {
      this.$emit('getdetailsform', this.detailsdialogform)
    },
    repaircontentpicSuccess(r) {
      this.repair_content_pic = r.data.url;
    },
    beforeAvatarUpload(file) {
      return new Promise((resolve, reject) => {
        let isLt2M = file.size / 1024 < 200; // 判定图片大小是否小于200KB
        let types = ['image/jpeg', 'image/png']
        let isimg = types.includes(file.type);
        if (!isimg) {
          this.$message.error('上传头像图片只能是 JPG和PNG 格式!');
          return isimg
        }
        if (isLt2M) {
          resolve(file)
        } else {
          imageConversion.compressAccurately(file, 200)// 压缩到200KB,这里的200就是要压缩的大小,可自定义
            .then(res => {
              resolve(res);
            })
        }
      })
    },
    repairdespicOnSuccess(r) {
      if (r.code === 0) {
        this.$message.success("上传成功");
        this.detailsdialogform.repair_des_pic.push(r.data.url)
      }
    },
    transferscreenshotOnSuccess(r) {
      if (r.code === 0) {
        this.$message.success("上传成功");
        this.Mailapprovaldialogform.transfer_screenshot.push(r.data.url)
      }
    },
    repairdespicRemove(file, i) {
      if (!file) {
        return false;
      }
      this.$confirm('是否删除此文件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message.success("删除成功");
          this.$message({
            type: 'success',
            message: '删除成功',
          });
          this.detailsdialogform.repair_des_pic.splice(i, 1);
        })
    },
    transferscreenshotRemove(file, i) {
      if (!file) {
        return false;
      }
      this.$confirm('是否删除此文件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message.success("删除成功");
          this.$message({
            type: 'success',
            message: '删除成功',
          });
          this.Mailapprovaldialogform.transfer_screenshot.splice(i, 1);
        })
    },
    opendialogurl(item) {
      this.dialogurl = true;
      this.dialogImageUrl = item
    },
    lookhisimg() {
      this.historydialog = true
      this.$get(this.$api + '/repair/get_mch_pcb_update_log', {
        mch_id: this.detailsdialogform.mch_id,
      }).then((res) => {
        if (res.code === 0) {
          this.historylist = res.data
        } else {
          this.$notify({
            title: '失败',
            message: res.msg,
            type: 'error',
          })
        }
      })
    },
    querymateriel_total_show_no(queryString, callback) {
      this.$post(this.$api + '/repair/search_repair_parts_materiel', {
        materiel_total_show_no: queryString
      }).then((data) => {
        var list = data.data;
        for (let i in list) {
          list[i].value = list[i].materiel_total_show_no;
        }
        callback(list);
      })
    },
    querymateriel_name(queryString, callback) {
      this.$post(this.$api + '/repair/search_repair_parts_materiel', {
        materiel_name: queryString
      }).then((data) => {
        var list = data.data;
        for (let i in list) {
          list[i].value = list[i].materiel_name;
        }
        callback(list);
      })
    },
    selectautocomplete(e, item) {
      item.materiel_name = e.materiel_name
      item.materiel_specifications = e.materiel_specifications
      item.materiel_total_show_no = e.materiel_total_show_no
    },
    add(index, item, type) {
      var obj = {}
      if (type === "repair_parts_normal") {
        obj = {
          materiel_name: "",
          materiel_total_show_no: "",
          materiel_specifications: "",
          count: "",
        }
      }
      if (type === "repair_parts_return") {
        obj = {
          materiel_total_show_no: "",
          box_no: "",
          remark: "",
        }
      }
      this.Mailapprovaldialogform[type].push(obj)
    },
    del(index, item, type) {
      if (this.Mailapprovaldialogform[type].length > 1) {
        this.Mailapprovaldialogform[type].splice(index, 1);
      }
    },
  },
}
</script>

